<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh_CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>

    <title>后台登录</title>

    <!-- 浏览器标签图片 -->
    <link rel="shortcut icon" th:href="@{/topjui/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/default/easyui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/demo/demo.css}"/>
    <style type="text/css">
        html, body {
            height: 100%;
        }

        .box {
            background: url("/topjui/images/bg2.jpg") no-repeat center center;
            background-size: cover;

            margin: 0 auto;
            position: relative;
            width: 100%;
            height: 100%;
        }

        .login-box {
            width: 100%;
            max-width: 500px;
            height: 400px;
            position: absolute;
            top: 50%;

            margin-top: -200px;
            /*设置负值，为要定位子盒子的一半高度*/

        }

        @media screen and (min-width: 500px) {
            .login-box {
                left: 50%;
                /*设置负值，为要定位子盒子的一半宽度*/
                margin-left: -250px;
            }
        }

        .form {
            width: 100%;
            max-width: 500px;
            height: 275px;
            margin: 2px auto 0px auto;
        }

        .login-content {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            height: 250px;
            width: 100%;
            max-width: 500px;
            background-color: rgba(255, 250, 2550, .6);
            float: left;
        }

        .input-group {
            margin: 30px 0px 0px 0px !important;
        }

        .form-control,
        .input-group {
            height: 40px;
        }

        .form-actions {
            margin-top: 30px;
        }

        .form-group {
            margin-bottom: 0px !important;
        }

        .login-title {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            padding: 20px 10px;
            background-color: rgba(0, 0, 0, .6);
        }

        .login-title h1 {
            margin-top: 10px !important;
        }

        .login-title small {
            color: #fff;
        }

        .link p {
            line-height: 20px;
            margin-top: 30px;
        }

        .btn-sm {
            padding: 8px 24px !important;
            font-size: 16px !important;
        }

        .flag {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #fff;
            font-weight: bold;
            font: 14px/normal "microsoft yahei", "Times New Roman", "宋体", Times, serif;
        }
    </style>
</head>
<body style="padding: 0;">
<div class="box" >
    <div class="login-box">
        <div class="login-title text-center">
            <span class="flag"><i class="fa fa-user"></i>用户登陆</span>
            <h1>
                <small>后台管理系统登录</small>
            </h1>
        </div>
        <div class="login-content ">
            <div class="form">
                <form id="loginFormId" class="form-horizontal" method="post" th:action="@{/login}">
                    <div class="form-group">
                        <div class="col-xs-10 col-xs-offset-1">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input type="text" id="username" name="username" class="form-control" placeholder="用户名" value=""/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-10 col-xs-offset-1">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input type="password" id="password" name="password" class="form-control" placeholder="密码" value=""/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="height: 30px;">
                        <div class="col-xs-10 col-xs-offset-1">
                            <div style="margin:10px 0 0px 0;"></div>
                            <input type="hidden" id="hiddenBeforeValue" value="0" />
                            <input id="sliderId" class="easyui-slider" style="width:100%;" data-options="showTip:false,value:0"/>
                        </div>
                    </div>
                    <div class="form-group form-actions" style="margin-top: 5px;">
                        <div class="col-xs-12 text-center">
                            <button type="button" id="login" class="btn btn-sm btn-success"><span class="fa fa-check-circle"></span> 登录</button>
                            <button type="button" id="reset" class="btn btn-sm btn-danger"><span class="fa fa-close"></span> 重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 引入jQuery -->
<script type="text/javascript" th:src="@{/easyui/jquery.min.js}"></script>
<script th:src="@{/jquery/jquery.cookie.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script th:src="@{/static/plugins/bootstrap/plugins/html5shiv.min.js}"></script>
<script th:src="@{/static/plugins/bootstrap/plugins/respond.min.js}"></script>
<![endif]-->
<script type="text/javascript">
    $('#sliderId').slider({
        onComplete : function(v){
            var before = $("#hiddenBeforeValue").val();
            $("#hiddenBeforeValue").val(v);
            if (before==100){
                $('#sliderId').slider("setValue",100);
                $("#hiddenBeforeValue").val(100);
            }else{
                if (v==100){
                    $.messager.show({
                        title:'提示',
                        msg:'滑动解锁成功！',
                        showType:'fade',
                        timeout:1000,
                        showSpeed:100,
                        style:{
                            right:'',
                            top:'20%',
                            bottom:'70%'
                        }
                    });
                } else{
                    $('#sliderId').slider("reset");
                }
            }
        }
    });

    if (navigator.appName == "Microsoft Internet Explorer" &&
        (navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" ||
            navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" ||
            navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0")
    ) {
        alert("您的浏览器版本过低，请使用360安全浏览器的极速模式或IE9.0以上版本的浏览器");
    }
</script>
<script type="text/javascript">
    $(function () {

        var locationUrl = location.search;
        if(locationUrl=='?error'){
            $.messager.show({
                title:'提示',
                msg:'用户名或者密码错误，请重试！',
                showType:'fade',
                timeout:1500,
                showSpeed:100,
                style:{
                    right:'',
                    top:'20%',
                    bottom:'70%'
                }
            });
        }

        $('#password').keyup(function (event) {
            if (event.keyCode == "13") {
                $("#login").trigger("click");
                return false;
            }
        });

        $("#login").on("click", function () {
            var username = $.trim($("#username").val());
            var password = $.trim($("#password").val());
            if (username===''||password===''){
                $.messager.show({
                    title:'提示',
                    msg:'用户名或者密码不能为空！',
                    showType:'fade',
                    timeout:1500,
                    showSpeed:100,
                    style:{
                        right:'',
                        top:'20%',
                        bottom:'70%'
                    }
                });
            }else{
                submitForm();
            }
        });



        function submitForm() {
            if (navigator.appName == "Microsoft Internet Explorer" &&
                (navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" ||
                    navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" ||
                    navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0")
            ) {
                alert("您的浏览器版本过低，请使用360安全浏览器的极速模式或IE9.0以上版本的浏览器");
            } else {
                var v = $('#sliderId').slider("getValue");
                if (v == 100) {
                    $("#loginFormId").submit();
                }else{
                    $.messager.show({
                        title:'提示',
                        msg:'请先滑动解锁，再登录！',
                        showType:'fade',
                        timeout:1000,
                        showSpeed:100,
                        style:{
                            right:'',
                            top:'20%',
                            bottom:'70%'
                        }
                    });
                }
            }
        }

        $("#reset").on("click", function () {
            $("#username").val("");
            $("#password").val("");
        });
    });

</script>
</body>
</html>